<template>
  <view class="stock-item" :style="{ background: props.backgroundColor }">
    <view class="store-top flex-row-between">
      <view class="left">
        <view class="store-name">{{ storeItem.c_name }}</view>
        <view class="stock-list">
          <template v-if="storeItem.detail.length === 1">
            <view class="info-row">
              <text>门店库存：</text>
              <text>{{ storeItem.detail[0].c_stock_n }}</text>
            </view>
          </template>
          <template v-else>
            <view class="info-row" v-for="(detailItem, detailIndex) in storeItem.detail" :key="detailIndex">
              <text>货号：{{ detailItem.c_gcode }} &nbsp;门店库存：{{ detailItem.c_stock_n }}</text>
            </view>
          </template>
        </view>
      </view>
      <eui-button
          type="primary"
          size="mini"
          title="申请调拨"
          min-width="156"
          @click="handleApply"
      ></eui-button>
    </view>

    <view class="store-info">
      <view class="info-row" @click="handlePhone">
        <text>店长：</text>
        <text>{{ storeItem.c_manager_username }} {{ storeItem.c_manager_mobile || storeItem.c_tele }}</text>
        <image class="phone-icon" src="@/static/img/busiImgs/btn_phone_inventory_pop.png"></image>
      </view>
      <view class="info-row">
        <text style="white-space: nowrap">门店距离：</text>
        <text>{{ storeItem.c_distance }}km | {{ storeItem.c_address }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {defineProps} from 'vue';

interface StoreItem {
  c_store_id: string;
  c_name: string;
  c_store_guid: string;
  c_address: string;
  c_manager_userno: string;
  c_manager_mobile: string;
  c_tele: string;
  c_distance: number;
  detail: {
    c_store_id: string;
    c_gcode: string;
    c_stock_n: number;
    db_stock: number;
    stock_status: string;
  }[];
  stock_gds_fully: number;
  stock_status: string;
}

const props = defineProps<{
  storeItem: StoreItem,
  backgroundColor: string,
}>();

const emit = defineEmits(['handleApply'])

const handleApply = () => {
  emit('handleApply', props.storeItem)
}

const handlePhone = () => {
  uni.makePhoneCall({
    phoneNumber: props.storeItem.c_manager_mobile || props.storeItem.c_tele
  })
}

</script>

<style scoped lang="scss">
.stock-item {
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;
  border-radius: 20rpx;

  .store-top {
    align-items: flex-start;

    ::v-deep .m-button {
      width: 156rpx;
      height: 70rpx;
      margin: 0 0 0 20rpx;
      line-height: 70rpx;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: #ffffff;
      padding: 0;
    }

    .left {
      width: calc(100% - 156rpx - 20rpx);

      .store-name {
        font-size: 28rpx;
        font-weight: bold;
        text-align: left;
        color: #222222;
        line-height: 40rpx;
      }

      .stock-list {
        .info-row {
          font-size: 28rpx;
          text-align: left;
          color: #f56c6c;
          line-height: 40rpx;
        }
      }
    }
  }


  .info-row {
    display: flex;
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;

    .phone-icon {
      width: 30rpx;
      height: 30rpx;
      margin-left: 10rpx;
    }
  }


}
</style>
